<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script src="../js/cheapy_chart_pc.js"></script>
</head>
<body>
<div id="container" style="position: relative;height: 300px; width: 400px;cursor: pointer; margin-left: 100px; margin-top: 100px;"></div>
<script type="text/javascript">
    $(function(){
        var chart = new CheapyChart({
            el: "#container",
            animation: {
                enable: true,
                timeout: 2000
            },
            legend: {
                show: true
            },
            tooltip: {
                show: true,
                formatter: function(arr){
                    var html = [];
                    html.push("<div style='color: white; background-color: red; padding-left: 10px; padding-right: 10px; width: 150px;white-space: nowrap; border-top-left-radius: 5px; border-top-right-radius: 5px;'>Label: ", arr[0].name ,"</div>");
                    html.push("<div style='color: white; background-color: red; padding-left: 10px; padding-right: 10px; width: 150px;white-space: nowrap; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;'>Value: ", arr[0].value ,"</div>");
                    html.push("<div style='height:8px; text-align: center; margin-top: -9px; color: red; text-shadow: 5px 0 5px red;'>v</div>");
                    return html.join("");
                },
                position: function(arr){
                    var w = $(this).width();
                    var h = $(this).height();
                    var left = arr[0] - w / 2;
                    return [left, arr[1] - h - 20];
                }
            },
            yAxis: {
                boundaryGap: [0, 0],
                splitLine: {
                    show: 1,
                    onZero: true
                },
                axisLine: {
                    minValue: 0,
                    position: "both"
                },
                axisLabel: {
                    formatter: function(value){
                        var fValue = value;
                        if(!isNaN(value)){
                            fValue = window.parseFloat(value);
                            return fValue.toFixed(0);
                        }
                        return fValue;
                    }
                },
            },
            xAxis: {
                boundaryGap: [.05,.05],
                splitLine: {
                    show: true,
                    count: 9,
                    itemStyle: {
                        type: "dot"
                    },
                    first: true
                },
                axisLabel: {

                },
                axisLine: {
                    show: true,
                    position: "both"
                },
                data: [
                    "1", "3", "3", "4", "5", "6", "7", "8", "9"
                ]
            },
            series : [{
                show: true,
                type: "line",
                name: "myLine",
                data: [1, 3, 2, 4, 3, 6, 0, 9, 7],
                lineStyle: {
                    color: "red"
                }
            }]
        });
        chart.render();
    });
</script>
</body>
</html>